<template>
  <div class="app-container">
    <el-table
      id="myform"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >

      <el-table-column label="用户名" align="center">
        <template slot-scope="scope">{{ scope.row.userName }}</template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column label="账号状态" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.disabled=='0'?'success':'danger'">{{scope.row.disabled=='0'?"正常":"已停用"}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="resetUser(scope.row.userId)">重置密码</el-button>
          <el-button type="warning" size="mini" @click="updateUserState('1',scope.row.userId)"
                     v-if="scope.row.disabled=='0'">停用
          </el-button>
          <el-button type="success" size="mini" @click="updateUserState('0',scope.row.userId)" v-else>启用</el-button>
          <el-button type="danger" size="mini" @click="handleClean(scope.row.loginName)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import $ from "@/api/project";

  export default {
    data() {
      return {
        value: "",
        state: 0,
        list: [],
        val: "",
        roleId: "",
        userNumber: "",
        listLoading: true,
        options: [],
        roleList: [],
      };
    },
    created() {
      this.find();
    },
    methods: {
      updateUserState(state, id) {
        $.updateUserState({disabled: state, userId: id}).then(() => {
          this.find()
          this.$message({
            message: "成功！",
            type: "success"
          })
        })
      },
      resetUser(id) {
        $.resetUser({userId: id}).then(() => {
          this.$message({
            message: "已将该用户密码重置为q123456！",
            type: "success"
          })
        })
      },

      find() {
        this.listLoading = true;
        $.findAllUsers().then(res => {
            console.log(res.data)
            this.list = res.data
            this.listLoading = false
          }
        );
      },
      handleClean(id) {
        this.$confirm("此操作将删除该用户, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            //console.log(id)
            $.deleteUser({userId: id}).then(response => {
              this.$message({
                type: "success",
                message: "已删除!"
              });
              this.find();
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
    }
  };
</script>
<style scoped>
  .button {
    padding-left: 1rem;
  }
</style>
